<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>我的个性化页面</title>
    <link rel="stylesheet" href="">
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="header_logo">
                <img src="./imags/小黄人/DM_20231031070711_001.JPEG" alt=""><img
                    src="./imags/海贼王/DM_20231031070550_001.JPEG" alt=""><img
                    src="./imags/火影忍者/DM_20231031070416_001.WEBP" alt=""><img
                    src="./imags/皮卡丘/DM_20231031070155_001.JPEG" alt=""><img
                    src="./imags/龙珠超/DM_20231031070909_001.JPEG" alt="">
            </div>
            <div class="header_ele">
                <ul class="clearfix">
                    <li>
                        <img src="./imags/小黄人/DM_20231031070711_002.JPEG" alt="">
                        <div class="text">
                            <p>由一群黄色有机体组成的团队，它们有些是单眼，有些是双眼，有著几根头发，并都穿著工作服和戴著护目镜。此外，小小兵擅长唱歌和跳舞，并具有很强的团体意识。</p>
                        </div>
                    </li>
                    <li>
                        <img src="./imags/海贼王/DM_20231031070550_003.JPEG" alt="">
                        <div class="text">
                            <p>时值“大海贼时代”，为了寻找传说中海贼王罗杰所留下的大秘宝“ONE
                                PIECE”，无数海贼扬起旗帜，互相争斗。有一个梦想成为海贼王的少年叫路飞，他因误食“恶魔果实”而成为了橡皮人，在获得超人能力的同时付出了一辈子无法游泳的代价。</p>
                        </div>
                    </li>
                    <li>
                        <img src="./imags/火影忍者/DM_20231031070416_003.JPEG" alt="">
                        <div class="text">
                            <p>漩涡鸣人的孤儿生活开始，四代火影为了保护村子，将攻击村子九尾妖狐封印到了他体内，鸣人因此受尽了村人的冷落，只是拼命用各种恶作剧试图吸引大家的注意力。好在还是有伊鲁卡老师的关心，鸣人的性格才没有变得扭曲，他总是干劲十足、非常乐观。
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="./imags/皮卡丘/DM_20231031070155_005.JPEG" alt="">
                        <div class="text">
                            <p>皮卡丘是一只电气鼠，它全身的皮毛都是黄色的，背上有两条褐色的条纹，尾巴是像锯齿状的闪电，与身体相接的部分也有一片褐色的皮毛。它有着小小的嘴巴以及黑色的眼睛，脸颊上有着红色的电力袋，长长的耳朵尖端是黑色的。
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="./imags/龙珠超/DM_20231031070909_005.JPEG" alt="">
                        <div class="text">
                            <p>孙悟空与魔人布欧的激烈战斗结束后，地球重新恢复和平之后的若干年。与自漫长沉睡中觉醒的破坏神比鲁斯的相遇，加上曾经被人敬畏为“宇宙帝王”的弗利萨的复活，在这些接连迫近悟空等人的威胁之上，更有来自其他宇宙的神秘角色、新的敌人登场！新的冒险开始！
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="date">
            <ul>
                <div class="date_list">
                    <div class="date_name">小黄人</div>
                    <div class="date_img clearfix">
                        <img src="./imags/小黄人/DM_20231031070711_001.JPEG" alt=""><img
                            src="./imags/小黄人/DM_20231031070711_002.JPEG" alt=""><img
                            src="./imags/小黄人/DM_20231031070711_003.JPEG" alt=""><img
                            src="./imags/小黄人/DM_20231031070711_004.JPEG" alt=""><img
                            src="./imags/小黄人/DM_20231031070711_005.PNG" alt=""><img
                            src="./imags/小黄人/DM_20231031070711_006.JPEG" alt="">
                    </div>
                </div>
                <div class="date_list">
                    <div class="date_name">海贼王</div>
                    <div class="date_img clearfix">
                        <img src="./imags/海贼王/DM_20231031070550_001.JPEG" alt=""><img
                            src="./imags/海贼王/DM_20231031070550_002.JPEG" alt=""><img
                            src="./imags/海贼王/DM_20231031070550_003.JPEG" alt=""><img
                            src="./imags/海贼王/DM_20231031070550_004.JPEG" alt=""><img
                            src="./imags/海贼王/DM_20231031070550_005.JPEG" alt=""><img
                            src="./imags/海贼王/DM_20231031070551_006.JPEG" alt="">
                    </div>
                </div>
                <div class="date_list">
                    <div class="date_name">皮卡丘</div>
                    <div class="date_img clearfix">
                        <img src="./imags/皮卡丘/DM_20231031070155_001.JPEG" alt=""><img
                            src="./imags/皮卡丘/DM_20231031070155_002.JPEG" alt=""><img
                            src="./imags/皮卡丘/DM_20231031070155_003.JPEG" alt=""><img
                            src="./imags/皮卡丘/DM_20231031070155_004.JPEG" alt=""><img
                            src="./imags/皮卡丘/DM_20231031070155_005.JPEG" alt=""><img
                            src="./imags/皮卡丘/DM_20231031070155_006.JPEG" alt="">
                    </div>
                </div>
                <div class="date_list">
                    <div class="date_name">火影忍者</div>
                    <div class="date_img clearfix">
                        <img src="./imags/火影忍者/DM_20231031070416_001.WEBP" alt=""><img
                            src="./imags/火影忍者/DM_20231031070416_002.JPEG" alt=""><img
                            src="./imags/火影忍者/DM_20231031070416_003.JPEG" alt=""><img
                            src="./imags/火影忍者/DM_20231031070416_004.JPEG" alt=""><img
                            src="./imags/火影忍者/DM_20231031070416_005.WEBP" alt=""><img
                            src="./imags/火影忍者/DM_20231031070416_006.JPEG" alt="">
                    </div>
                </div>
                <div class="date_list">
                    <div class="date_name">龙珠超</div>
                    <div class="date_img clearfix">
                        <img src="./imags/龙珠超/DM_20231031070909_001.JPEG" alt=""><img
                            src="./imags/龙珠超/DM_20231031070909_002.WEBP" alt=""><img
                            src="./imags/龙珠超/DM_20231031070909_003.JPEG" alt=""><img
                            src="./imags/龙珠超/DM_20231031070909_004.JPEG" alt=""><img
                            src="./imags/龙珠超/DM_20231031070909_005.JPEG" alt=""><img
                            src="./imags/龙珠超/DM_20231031070909_006.JPEG" alt="">
                    </div>
                </div>
            </ul>
        </div>
    </div>
</body>
<script>
    window.onload = function () {
        let box = document.querySelector(".header_logo")
        let imagsone = document.querySelectorAll(".header_logo img");
        let x = 0;
        let angle = 360 / imagsone.length;
        console.log(imagsone.length, angle);
        for (let i = 0; i < imagsone.length; i++) {
            imagsone[i].style.transform = "rotateY(" + angle * i + "deg) translateZ(140px)";
        }
        let imd = document.querySelectorAll(".date_img")
        setInterval(function () {
            x++
            box.style.transform = "rotateX(-15deg) rotateY(" + x * 0.6 + "deg)";
            for(let i = 0; i < imd.length; i++) {
                imd[i].style.transform = "rotateX(-15deg) rotateY("+ x*0.8+"deg)";
            }
        }, 100)
    }
</script>
<style>
    /*默认设置*/
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background: skyblue;
    }

    a {
        text-decoration: none;
        color: #000;
    }

    li {
        list-style: none;
    }

    /*消除浮动*/
    .clearfix::before,
    .clearfix::after {
        content: "";
        display: table;
    }

    .clearfix::after {
        clear: both;
    }

    /*导航栏美化*/
    .container {
        width: 100%;
        border: 1px solid #000;
    }

    .header_logo {
        display: inline-block;
        width: 200px;
        height: 100px;
        position: relative;
        margin-top: 40px;
        margin-left: 80px;
        /* border:1px solid #000; */
        transform-style: preserve-3d;
        perspective: 500;
        transform: rotateX(-30deg);
    }

    .header_logo img {
        width: 200px;
        height: 100px;
        /* border: 1px solid #000; */
        position: absolute;
        -webkit-box-reflect: below 5px -webkit-linear-gradient(top, transparent, rgb(67, 167, 156));
        box-shadow: 0 0 50px #9951c6;
        border-radius: 15px
    }

    .header_ele {
        height: 250px;
        width: 81%;
        position: relative;
        float: right;
        /* border: 1px solid #000; */
    }

    .header_ele li {
        height: 250px;
        width: 20%;
        border: 1px solid #a02a86;
        box-shadow: 0 0 8px #a02a86;
        border-radius: 20px;
        float: left;
        overflow: hidden;
        position: relative
    }

    .header_ele li img {
        height: 250px;
        margin-left: -55px;
        opacity: 0;
        position: absolute;
        transition: opacity 1s;
    }

    .header_ele li img:hover {
        opacity: 1;
    }

    .header_ele li p {
        text-indent: 24px;
        font-family: "楷体";
        font-weight: 500;
        font-size: 18px;
        text-align: center;
        margin-top: 50px;
        color: #0c7932;
    }

    .date {
        margin-top: 160px;
        height: 800px;
        /* width:400px; */
        /* border: 1px solid #000; */
        /* display:inline-block; */
        position: relative;
    }

    /* .date_list{
        display:inline-block;
        margin: 0;
    } */
    .date_list .date_name {
        height: 160px;
        width: 400px;
        display: inline-block;
        border: 1px solid #32480e;
        box-shadow: 0 0 20px#9951c6;
        text-align: center;
        line-height: 160px;
        font-family: "楷体";
        font-size: 40px;
        text-shadow: 1px 1px 3px #333,
            2px 2px 6px #666;
        border-radius: 20px;
    }

    .date_list .date_img {
        height: 180px;
        width: 300px;
        position: relative;
        /* border: 1px solid #000; */
        float: right;
        transform-style: preserve-3d;
        /* transform: rotateX(-15deg); */
        /* margin:5% 42%; */
        opacity: 0;
    }
    .date_name:hover+.date_img{
        opacity: 1;
    }
    .date_img img {
        width: 300px;
        height: 180px;
        position: absolute;
        -webkit-box-reflect: below 20px -webkit-linear-gradient(top, transparent, #b35757e0);
        box-shadow: 0 0 10px #0c79f5;
    }

    .date_img img:nth-child(1) {
        transform: rotateY(0deg) translateZ(500px);
    }

    .date_img img:nth-child(2) {
        transform: rotateY(60deg) translateZ(500px);
    }

    .date_img img:nth-child(3) {
        transform: rotateY(120deg) translateZ(500px);
    }

    .date_img img:nth-child(4) {
        transform: rotateY(180deg) translateZ(500px);
    }

    .date_img img:nth-child(5) {
        transform: rotateY(240deg) translateZ(500px);
    }

    .date_img img:nth-child(6) {
        transform: rotateY(300deg) translateZ(500px);
    }

    .date_list:nth-child(1) .date_img {
        margin-right: 32%;
        margin-top: 10%;
    }

    .date_list:nth-child(2) .date_img {
        margin-top: 30px;
        margin-right: -300px;
    }

    .date_list:nth-child(3) .date_img {
        margin-top: -130px;
        margin-right: -300px;
    }

    .date_list:nth-child(4) .date_img {
        margin-top: -290px;
        margin-right: 606px;
    }

    .date_list:nth-child(5) .date_img {
        margin-top: -450px;
        margin-right: 606px;
    }

    .date_list .date_img img {
        position: absolute;
        height: 240px;
        width: 480px;
        border-radius: 20px;
    }

    /*内容美化*/
</style>

</html>